<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>13-模拟双向数据绑定</title>
</head>
<body>
  <h2></h2>
  <input type="text" id="txt">
  <script>
    const obj = {}
    // 1. 获取页面中的标签对象
    const txt = document.getElementById('txt')
    const h2 = document.querySelector('h2')
    // 2. 给事件源注册事件
    txt.addEventListener('input', function () {
      obj.msg = this.value
    })

    let result
    // 对 obj对象的属性做截持 使用get与set方法
    Object.defineProperty(obj, 'msg', {
      get() {
        return result
      },
      set(val) {
        console.log('msg被赋值了...', val)
        result = val
        h2.innerHTML = result
      }
    })
    console.log(obj)
  </script>
</body>
</html>